<template>
    <div class="menu">
        <!--	<div class="up animated">上下晃动</div>
	            <div class="around animated">左右晃动</div>
	      -->
        <slot>

        </slot>
    </div>
</template>
<script>
  export default {
    data () {
      return {}
    },
    methods: {},
    computed: {},
    components: {}
  }
</script>
<style scoped lang="less">
  .menu{
    width: 150px;
    height: 150px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 150px;
    display: inline-block;
    margin: 15px;

  }
  .animated {
    animation-duration: 2s; /*动画时间*/
    animation-fill-mode: both; /*播放后的状态*/
  }

  .animated {
    animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
  }

  .animated {
    animation-duration: 2s; /*动画时间*/
  }

  .up,.around {
    background: #2D97DB;
    width: 90%;
    height: 90%;
    padding: 20px;
    margin: 20px auto;
    font-family: "微软雅黑";
    font-size: 40px;
    color: white;
    text-align: center;
    line-height: 90%;
  }
  .around{
    background-color: #44a036;
  }

  .up{
    animation-name:upAnimation; /*动画的名称*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为*/
    cursor: pointer;
  }
  .around{
    animation-name:aroundAnimation; /*动画的名称*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为*/
    cursor: pointer;
  }

  @keyframes upAnimation{
    0%,
    100%,
    20%,
    50%,
    80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      transform: translate3d(0,0,0);
    }
    40%,
    43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(0,-30px,0);
    }
    70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(0,-15px,0);
    }
    90%{
      transform: translate3d(0,-4px,0);
    }
  }

  @keyframes aroundAnimation{
    0%,
    100%,
    20%,
    50%,
    80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      transform: translate3d(0,0,0);
    }
    40%,
    43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(-20px,0,0);
    }
    70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(-10px,0px,0);
    }
    90%{
      transform: translate3d(20px,0,0);
    }
  }

</style>
